<template>
  <div>
    <div class="item-head">
      <div class="back" @click="$router.go(-1)">
        <van-icon name="arrow-left" />
      </div>
      <div class="gosearch" @click="$router.push('/search')">
        <img
          src="https://m.ehaoyao.com/_nuxt/img/icon-search.0efa216.png"
        />商品
      </div>
      <div class="changestyle"></div>
    </div>
    <div class="cate_contain clearfix">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            :title="cate.name"
            v-for="cate in cates"
            :key="cate.id"
            @click="clickTab(cate.id)"
          />
        </van-sidebar>
      </div>
      <div class="right">
        <div class="right_c">
          <ul class="clearfix">
            <li v-cloak v-if="items.length === 0" style="width: 100%">
              <img style="width: 100%" src="../../assets/img/why.jpg" />
            </li>
            <li v-for="item in items" :key="item.id" @click="goDetail(item.id)">
              <div class="right_c_img">
                <img :src="item.pic" />
              </div>
              <div class="right_c_name">{{ item.name }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import { classification, goodslist } from '_api'
import MyTabbar from '../../components/tabbar.vue'
export default {
  components: { MyTabbar },
  data () {
    return {
      cates: [],
      items: [],
      activeKey: 0
    }
  },
  created () {
    this.classify()
    this.homegoodlist(72399)
  },
  methods: {
    classify () {
      classification().then((res) => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    homegoodlist (goodid) {
      goodslist({
        categoryId: goodid
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
      })
    },
    clickTab (goodid) {
      this.items = []
      this.homegoodlist(goodid)
    },
    goDetail (id) {
      this.$router.push(`/details/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
[v-cloak] {
  display: none;
}
.item-head {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999999;
  padding: 0.15rem 0;
  box-sizing: border-box;
  height: 0.88rem;
  display: flex;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  .back {
    text-align: center;
    width: 13%;
    font-size: 0.4rem;
    line-height: 0.56rem;
  }
  .changestyle {
    width: 7%;
  }
  .gosearch {
    flex: 1;
    position: relative;
    line-height: 0.56rem;
    padding-left: 0.66rem;
    background: #f0f2f5;
    color: #898989;
    img {
      position: absolute;
      left: 0.25rem;
      width: 0.26rem;
      top: 0.1rem;
    }
  }
}
.cate_contain {
  padding-top: 0.88rem;

  .van-sidebar-item--select::before {
    height: 58px !important;
  }
  /deep/ .van-sidebar {
    float: left;
    position: fixed;
    height: 100vh;
    width: 23%;
    background: #f7f8fa;
    .van-sidebar-item {
      height: 58px;
      .van-sidebar-item--select::before {
        height: 58px !important;
      }
    }
  }
  .right {
    float: left;
    margin-left: 23%;
    width: 77%;
    padding: 0.2rem;
    box-sizing: border-box;
    .right_c {
      padding-bottom: 0.6rem;
    }
    li:nth-child(2n) {
      border-right: none;
    }
    li {
      height: 2.3rem;
      width: 50%;
      float: left;
      border-right: 1px solid #e5e5e5;
      box-sizing: border-box;
      text-align: center;
      margin-bottom: 0.48rem;
      .right_c_img {
        width: 100%;
        height: 1.2rem;
        text-align: center;
        img {
          width: 1.2rem;
          height: 1.2rem;
        }
      }
      .right_c_name {
        margin-top: 0.36rem;
        font-size: 0.28rem;
        line-height: 0.6rem;
        overflow: hidden; /*超出部分隐藏*/
        white-space: nowrap; /*不换行*/
        text-overflow: ellipsis; /*超出部分文字以...显示*/
      }
    }
  }
}
</style>
